<template>
	<view class="introduce">
		<nav-bars bgColor="transparent"></nav-bars>
		<view class="topImg">
			<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode=""></image>
			<view class="avatarTit">
				<image src="https://manager.ryz1620.com/static/my/avator.png" mode=""></image>
				恒艺装饰（凌筑国际设计）
			</view>
		</view>
		<view class="content" :style="'margin-top:'+navHeight+'rpx;'">
			<view style="border-bottom: 2rpx solid #F4F4F4;">
				<u-tabs style="border-bottom: 1rpx solid #F4F4F4;" :bar-style="tabsBottomStyle" :list="tabslist" inactive-color="#999999"
				 active-color="#C3AB7C" :is-scroll="false" font-size="28" :current="current" @change="TabsChange"></u-tabs>
			</view>
			<!-- 公司介绍 -->
			<view class="companyInfo" v-if="current==0">
				<view class="item">
					<text class="tit">专长风格</text>
					<view class="info">简约、现代、北欧</view>
				</view>
				<view class="item">
					<text class="tit">专长风格</text>
					<view class="info">
						两手硬装饰深耕广东22年，服务2W+家庭，目前
						已设立广州天河总部、海珠分公司、佛山海南
					</view>
				</view>
			</view>
			
			<!-- 特色服务 -->
			<view class="charaService" v-if="current==1">
				<view class="item">
					<view class="tit">平台服务</view>
					<view class="list">
						<view class="topText">
							<text class="iconfont">&#xe69a;</text>
							<view class="info">
								先装修后支付
								<view class="bottomTxt">
									装修款100%托管，阶段施工完毕业主确认后支付。
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="tit">商家承诺</view>
					<view class="list">
						<view class="topText">
							<text class="iconfont">&#xe69a;</text>
							<view class="info">
								先装修后支付
								<view class="bottomTxt">
									装修款100%托管，阶段施工完毕业主确认后支付。
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 资质荣誉 -->
			<view class="honor" v-if="current==2">
				<view class="item">
					<view class="tit">公司资质<text>（3）</text></view>
					<view class="imgBox">
						<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode="">
						<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode="">
						<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode="">
					</view>
				</view>
				<view class="item">
					<view class="tit">公司荣誉<text>（2）</text></view>
					<view class="imgBox">
						<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode="">
						<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode="">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabslist: [{
						name: '公司介绍'
					},
					{
						name: '特色服务'
					},
					{
						name: '资质荣誉'
					}
				],
				current: 0,
				navHeight:0,
			}
		},
		onLoad() {
			this.$utils.getUrl()
			let heightNav = uni.getStorageSync('StatusBarHeight').height
			this.navHeight = 446-(heightNav*2)
			console.log(this.navHeight,'topnavHEIGTH')
		},
		methods:{
			// 切换tabs
			TabsChange(index) {
				this.current = index;
			},
		}
	}
</script>

<style lang="less">
	page{
		height: 100%;
	}
	.introduce{
		height: 100%;
		background-color: #fff;
		position: relative;
		.topImg{
			width: 100%;
			height: 446rpx;
			position: absolute;
			top: 0;
			left: 0;
			image{
				width: 100%;
				height: 446rpx;
			}
			.avatarTit{
				width: 100%;
				height: 126rpx;
				background-color: #fff;
				border-radius: 16rpx 16rpx 0 0;
				position: absolute;
				left: 0;
				bottom: -2rpx;
				padding-top: 70rpx;
				text-align: center;
				font: 600 36rpx/50rpx PingFang SC;
				color: #333;
				image{
					width: 128rpx;
					height: 128rpx;
					border-radius: 50%;
					position: absolute;
					left: 50%;
					top: -50%;
					border: 2rpx solid #fff;
					margin-bottom: 8rpx;
					transform: translate(-64rpx,-5rpx);
				}
			}
		}
		
		// 内容
		.content{
			padding-top: 10rpx;
			// 公司介绍
			.companyInfo{
				padding: 40rpx 32rpx;
				.item{
					display: flex;
					font: 400 24rpx/44rpx PingFang SC;
					margin-bottom: 32rpx;
					.tit{
						color: #939393;
						flex-shrink: 0;
						margin-right: 32rpx;
					}
					.info{
						color: #333333;
					}
				}
			}
			
			// 特色服务
			.charaService{
				padding:0 32rpx;
				.item{
					margin-bottom: 60rpx;
					.tit{
						text-align: center;
						margin: 24rpx 32rpx;
						font: 600 28rpx/44rpx PingFang SC;
						color: #333;
					}
					.list{
						.topText{
							display: flex;
							// align-items: center;
							font: 400 24rpx/30rpx PingFang SC;
							text{
								width: 30rpx;
								height: 30rpx;
								background-color: #C3AB7C;
								border-radius: 50%;
								color: #fff;
								text-align: center;
								margin-right: 20rpx;
								flex-shrink: 0;
								line-height: 30rpx;
							}
							.iconfont{
								font-size: 24rpx;
							}
							.info{
								color: #333;
								.bottomTxt{
									color: #939393;
									line-height: 44rpx;
								}
							}
						}
					}
				}
			}
			
			// 资质荣誉
			.honor{
				padding: 32rpx;
				.item{
					margin-bottom: 60rpx;
					.tit{
						margin-bottom: 20rpx;
						font: 400 24rpx/44rpx PingFang SC;
						color: #333;
						text{
							color: #939393;
						}
					}
					.imgBox{
						display: grid;						grid-template-columns: repeat(3, 1fr);						grid-gap: .5rem;
						image{
							width: 220rpx;
							height: 220rpx;
							border-radius: 4rpx;
						}
					}
				}
			}
			
		}
	}
</style>
